<template>
  <div class="report">
    <van-sticky>
      <van-nav-bar title="报表"></van-nav-bar>
      <div class="report-area">
        <van-tabs @click="showChart">
          <van-tab :id="item.id" v-for="(item,i) in cartTitle" :key="i">
            <div class="title" slot="title">
              <img :src="item.img" />
              <p>{{item.title}}</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-sticky>
    <div id="first_chart" class="chartItem">
      <van-panel title="生产线速度">
        <div id="firstChart" :style="{ height: '16rem',margin: '0 .5rem'}"></div>
      </van-panel>
    </div>

    <div class="chartItem" id="second_chart">
      <van-panel title="当班产量">
        <div id="secondChart" :style="{ height: '16rem',margin: '0 .5rem'}"></div>
      </van-panel>
    </div>

    <div id="third_chart" class="chartItem">
      <van-panel title="数据汇总">
        <div>
          <table cellspacing="0" border class="table">
            <tr>
              <td>生产总量</td>
              <td>{{allDandnroll.curDay}}m</td>
            </tr>
            <tr>
              <td style="color: green;">成品数量</td>
              <td>{{allDandnroll.cpnum}}卷</td>
            </tr>
            <tr>
              <td style="color: #3398DB;">不合格品数量</td>
              <td>{{allDandnroll.Incompetent}}卷</td>
            </tr>
            <tr>
              <td>当前生产批次号</td>
              <td>{{allDandnroll.WG585LL0719101200199411355&&allDandnroll.WG585LL0719101200199411355.varvalue}}</td>
            </tr>
            <tr>
              <td>当前生产名称</td>
              <td>{{allDandnroll.WG585LL0719101200199411352&&allDandnroll.WG585LL0719101200199411352.varvalue}}</td>
            </tr>
            <tr>
              <td>当前生产型号</td>
              <td>{{allDandnroll.WG585LL0719101200199411353&&allDandnroll.WG585LL0719101200199411353.varvalue}}</td>
            </tr>
            <tr>
              <td>累计重量:</td>
              <td>
            <tr>
              <td>白班</td>
              <td>{{allDandnroll.Dvalue}}卷</td>
            </tr>
            <tr>
              <td>晚班</td>
              <td>{{allDandnroll.Nvalue}}卷</td>
            </tr>
            </td>
            </tr>
          </table>
        </div>
      </van-panel>
    </div>

    <div class="chartItem" id="fourth_chart">
      <van-panel title="当班人员">
        <div class="workMan">
          <div class="headman">{{master}}</div>
          <div class="under"></div>
          <div class="underTop"></div>
          <div class="verticalLines">
            <div class="bd" v-for="(item,i) in allCurMan" :key='i'>
             <span>
                {{item.stationName}}
              </span>
            </div>
          </div>
          <div class="peoples">
            <div class="peo" v-for="(item,i) in allCurMan" :key='i'>{{item.userName[0]}}</div>
          </div>
          <div class="verticalLines">
            <div class="bd" v-for="(item,i) in allCurMan" :key='i'></div>
          </div>
          <div class="peoples">
            <div class="peo" v-for="(item,i) in allCurMan" :key='i'>{{item.userName[1]}}</div>
          </div>
        </div>
      </van-panel>
    </div>

    <div id="fifth_chart" class="chartItem">
      <van-panel title="运行统计">
        <div>
          <div id="runCount" :style="{height: '16rem'}"></div>
        </div>
      </van-panel>
    </div>
    <div id="sixth_chart" class="chartItem">
      <van-panel title="当月每日统计数量">
        <div>
          <div id="dayCount" :style="{height: '16rem'}"></div>
        </div>
      </van-panel>
    </div>

    <div id="seventh_chart" class="chartItem">
      <van-panel title="能量平均消耗">
        <div>
          <div id="everyWaster" :style="{height: '16rem'}"></div>
        </div>
      </van-panel>
    </div>

    <div id="ninth_chart" class="chartItem">
      <van-panel title="左厚度统计">
        <div>
          <div id="leftCount" :style="{height: '16rem'}"></div>
        </div>
      </van-panel>
    </div>
    <div id="tenth_chart" class="chartItem">
      <van-panel title="右厚度统计">
        <div>
          <div id="rightCount" :style="{height: '16rem'}"></div>
        </div>
      </van-panel>
    </div>
    <div id="eleventh_chart" class="chartItem">
      <van-panel title="当月故障时间">
        <div>
          <div id="bugTime" :style="{height: '16rem'}"></div>
        </div>
      </van-panel>
    </div>
    <div id="twelfth_chart" class="chartItem">
      <van-panel title="胎基布消耗量">
        <div>
          <div id="taiCount" :style="{height: '16rem'}"></div>
        </div>
      </van-panel>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        curManTime:'',
        bugTimeD:'',
        bugTimeT:'',
        everyWasterD:'',
        everyWastertime:'',
        allDandnroll:[],
        master:'',
        LinespeedChart:'',
        leftCount:'',
        rightCount:'',
        dayCount:'',
        runCount:'',
        secondChart:'',
        taiCount:'',
        allCurMan:[],
        fivetime:'',
        sixtime:'',
        eighttime:'',
        ninetime:'',
        eleventime:'',
        firstTime:'',
        threeth:'',
        sliderOptions: {
          slidesPerView: 4
        },
        cartTitle: [{
            img: require("../../assets/imgs/rate.png"),
            title: "生产线速度",
            id: "first",
            value: 0
          },
          {
            img: require("../../assets/imgs/input.png"),
            title: "当班产量",
            id: "second",
            value: 1
          },
          {
            img: require("../../assets/imgs/dataAll.png"),
            title: "数据汇总",
            id: "third",
            value: 2
          },
          {
            img: require("../../assets/imgs/turnMan.png"),
            title: "当班人员",
            id: "fourth",
            value: 3
          },
          {
            img: require("../../assets/imgs/count.png"),
            title: "运行统计",
            id: "fifth",
            value: 4
          },
          {
            img: require("../../assets/imgs/mInput.png"),
            title: "当月每日累积产量",
            id: "sixth",
            value: 5
          },
          {
            img: require("../../assets/imgs/use.png"),
            title: "能源平均消耗",
            id: "seventh",
            value: 6
          },
          /* {
             img: require("../../assets/imgs/look1.png"),
             title: "监控视频",
             id: "eighth",
             value: 7
           }, */
          {
            img: require("../../assets/imgs/count4.png"),
            title: "左厚度统计",
            id: "ninth",
            value: 8
          },
          {
            img: require("../../assets/imgs/count3.png"),
            title: "右厚度统计",
            id: "tenth",
            value: 9
          },
          {
            img: require("../../assets/imgs/time.png"),
            title: "当月故障时间",
            id: "eleventh",
            value: 10
          },
          {
            img: require("../../assets/imgs/use2.png"),
            title: "胎基布消耗量",
            id: "twelfth",
            value: 11
          }
        ]
      };
    },
    destroyed(){
      clearInterval(this.fivetime)
      clearInterval(this.sixtime)
      clearInterval(this.ninetime)
      clearInterval(this.eighttime)
      clearInterval(this.eleventime)
      clearInterval(this.firstTime)
      clearInterval(this.threeth)
      clearInterval(this.everyWastertime)
      clearInterval(this.bugTimeT)
      clearInterval(this.curManTime)
    },
    mounted() {
     this.getCurMan()
      this.Linespeed()
      this.LinespeedInit()
      this.CurdayproductionInit()
      this.Curdayproduction()
      this.runcountInit()
      this.runCounts();
      this.dayCountInit()
      this.dayCounts();
      this.everyWaster();
      this.everyWasterInit()
      this.leftCountInit()
      this.leftCounts();
      this.rightCountInit()
      this.rightCounts();
      this.bugTimeInit()
      this.bugTime();
      this.taiCountInit()
      this.taiCounts();
      this.getAllDandnroll()
      this.curManTime = setInterval(()=>{
        this.getCurMan()
      },1200000)
    },
    methods: {
      getAllDandnroll(){
        this.$axios.post('/Dandnroll/getAllDandnroll.do',["WG585LL0719101200199411355","WG585LL0719101200199411352","WG585LL0719101200199411353",]).then(res=>{
          if(res.data.status === 200&&res.data.data){
            this.allDandnroll = res.data.data
            this.allDandnroll.cpnum = res.data.data.Nvalue+res.data.data.Dvalue-res.data.data.Incompetent
          }else if(res.data.status === 500){
            Toast.fail({message:res.data.msg,duration:900})
          }
        }).catch(err=>{
          Toast.fail({message:'系统异常',duration:900})
        })
      },
      getCurMan(){
        this.allCurMan = []
        this.$axios.get('/Graders/getGradersByTime.do').then(res=>{
          if(res.data.status === 200){
            this.master = res.data.data[0].userName
            res.data.data.forEach((item,i)=>{
              if(i>0){
                this.allCurMan.push({userName:item.userName.split(','),stationName:item.stationName})
              }
            })
          }else if(res.data.status === 500){
            Toast.fail({message:res.data.msg,duration:900})
          }
        }).catch(err=>{
          Toast.fail({message:'系统异常',duration:900})
        })
      },
      showChart(name, title) {
        let id = "";
        switch (name) {
          case 0:
            id = "first";
            break;
          case 1:
            id = "second";
            break;
          case 2:
            id = "third";
            break;
          case 3:
            id = "fourth";
            break;
          case 4:
            id = "fifth";
            break;
          case 5:
            id = "sixth";
            break;
          case 6:
            id = "seventh";
            break;
            /* case 7:
              id = "eigth";
              break; */
          case 7:
            id = "ninth";
            break;
          case 8:
            id = "tenth";
            break;
          case 9:
            id = "eleventh";
            break;
          case 10:
            id = "twelfth";
            break;
          default:
            break;
        }
        this.$nextTick(function() {
          let el = document.getElementById(id + "_chart");
          let offsetTop = el.offsetTop
          let offsetParent = el.offsetParent
          while (offsetParent) {
            offsetTop += offsetParent.offsetTop;
            offsetParent = offsetParent.offsetParent;
          }
          window.scroll(0, offsetTop - 123)
        });
      },
      runcountInit(){
        if(!this.runCount){
           this.runCount = this.$echarts.init(document.getElementById("runCount"));
        }
        this.$axios.post('Runningspeed/getAllRunningspeed.do').then(res => {
          if (res.data.status === 200) {
            this.runCount.setOption({
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                /* data: data.legendData,

                    selected: data.selected */
              },
              series: [{
                name: '运行统计',
                type: "pie",
                radius: "55%",
                center: ["40%", "50%"],
                data: [{
                    value: res.data.disu,
                    name: "低速运行"
                  },
                  {
                    value: res.data.tingyun,
                    name: "未运行"
                  },
                  {
                    value: res.data.gaosu,
                    name: "正常运行"
                  },
                  /* {
                    value: 400,
                    name: "高速(>10m/min)"
                  } */
                ].sort(function(a, b) {
                  return a.value - b.value;
                }),
                roseType: "radius",

                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                },

                animationType: "scale",
                animationEasing: "elasticOut",
                animationDelay: function(idx) {
                  return Math.random() * 200;
                }
              }]
            });
          }
        })
      },
      //5
      runCounts() {
        this.fivetime = setInterval(() => {
          this.runcountInit()
        },50000)

      },
      dayCountInit(){
        if(!this.dayCount){
          this.dayCount = this.$echarts.init(document.getElementById("dayCount"));
        }
        this.$axios.post('CurMonthProduction/getAllCurMonthProduction.do').then(res => {
          if (res.data.status === 200&&res.data.data) {
            let day = []
            let product = []
            res.data.data.forEach(item => {
              day.push(item.day)
              product.push(item.varvalue)
            })
            this.dayCount.setOption({
              color: ["#3398DB"],
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
              },
              xAxis: [{
                type: "category",
                data: day
                // axisTick: {
                // 	alignWithLabel: true
                // }
              }],
              yAxis: [{
                type: "value",
                name:'单位:m'
              }],
              series: [{
                type: "bar",
                barWidth: "60%",
                data: product
              }]
            });
          }
        })
      },
      //6
      dayCounts() {


        this.sixtime = setInterval(() => {
         this.dayCountInit()
        }, 50000)


      },
      //7
      everyWasterInit() {
        if(!this.everyWasterD){
          this.everyWasterD = this.$echarts.init(
            document.getElementById("everyWaster")
          );
        }
        this.$axios.get('/Consumption/getAllConsumption.do').then(res=>{
          if(res.data.status === 200&&res.data.data){
            let xAxisD = []
            let seriesD = []
            res.data.data.forEach(item=>{
              xAxisD.push(item.hour)
              seriesD.push(item.varvalue)
            })
            this.everyWasterD.setOption({
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: xAxisD
              },
              yAxis: {
                type: "value",
                name:'m/kws'
              },
              series: [{
                name:'能源平均消耗:',
                data: seriesD,
                type: "line"
              }]
            });
          }
        })
      },
      everyWaster(){
        this.everyWastertime = setInterval(()=>{
          this.everyWasterInit()
        },50000)
      },
      leftCountInit(){
        if(!this.leftCount){

          this.leftCount = this.$echarts.init(
            document.getElementById("leftCount")
          );

        }
        let leftX = []
        let leftY = []
        this.$axios.post("LeftControl/getAllLeftcontrol.do").then(res => {
          if (res.data.status === 200&&res.data.data) {
            let leftData = res.data.data;
            leftData.map((value, index) => {
              leftX.push(value.hour);
              leftY.push(value.varvalue);
            });
            this.leftCount.setOption({
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: leftX
              },
              yAxis: {
                type: "value",
                name:'单位:mm'
              },
              series: [{
                name:'左厚度统计:',
                data: leftY,
                type: "line"
              }]
            });
          }



        });
      },
      //左厚度
      leftCounts() {
        this.eighttime = setInterval(() => {

          this.leftCountInit()
        }, 50000)

      },
      rightCountInit(){
        if(!this.rightCount){
          this.rightCount = this.$echarts.init(
            document.getElementById("rightCount")

          );

        }
         let rightX = []
         let rightY = []
        this.$axios.post("RightControl/getAllRightControl.do").then(res => {
          if (res.data.status === 200&&res.data.data) {

            let rightData = res.data.data;

            rightData.map((value, index) => {
              rightX.push(value.hour);
              rightY.push(value.varvalue);
            });
            this.rightCount.setOption({
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: rightX
              },
              yAxis: {
                type: "value",
                name:'单位:mm'
              },
              series: [{
                name:'右厚度统计:',
                data: rightY,
                type: "line"
              }]
            });
          }



        });

      },
      //右厚度
            rightCounts() {
             this.ninetime = setInterval(() => {
               let rightX = []
               let rightY = []
                this.rightCountInit()

              }, 50000)

            },
            //故障时间
      bugTimeInit() {
        if(!this.bugTimeD){
          this.bugTimeD = this.$echarts.init(document.getElementById("bugTime"));
        }
        this.$axios.get('Maintenancedetails/getMaintenancedetailsTime.do').then(res=>{
          if(res.data.status === 200&&res.data.data){
            let xAxisD = []
            let seriesD = []
            res.data.data.forEach(item=>{
              xAxisD.push(item.name.replace('部分',''))
              seriesD.push((item.Time/3600000).toFixed(2))
            })
            console.log(xAxisD)
            console.log(seriesD)
            this.bugTimeD.setOption({
              color: ["#3398DB"],
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
              },
              xAxis: [{
                type: "category",
                data: xAxisD,
                axisTick: {
                  alignWithLabel: true
                }
              }],
              yAxis: [{
                type: "value",
                name:'单位：h'
              }],
              series: [{
                name:'故障时间(/h)',
                type: "bar",
                barWidth: "60%",
                data: seriesD
              }]
            });
          }
        })
      },
      bugTime(){
        this.bugTimeT = setInterval(()=>{
          this.bugTimeInit()
        },50000)
      },
      taiCountInit(){
        if(!this.taiCount){
          this.taiCount = this.$echarts.init(document.getElementById("taiCount"));
        }
        this.$axios.post('JiMiTotal/getAllJiMiTotal.do').then(res => {
          if (res.data.status === 200&&res.data.data) {
            let data = []
            let series = []
            res.data.data.forEach(item => {
              data.push(item.hour)
              series.push(item.varvalue)
            })
            this.taiCount.setOption({
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: data
              },
              yAxis: {
                type: "value",
                name:'单位：h'
              },
              series: [{
                name:'胎基部消耗：',
                data: series,
                type: "line"
              }]
            });
          }
        })
      },
      taiCounts() {

       this.eleventime = setInterval(() => {
          this.taiCountInit()
        }, 50000)

      },
      LinespeedInit(){
        if(!this.LinespeedChart){
          // 基于准备好的dom，初始化echarts实例
          this.LinespeedChart = this.$echarts.init(document.getElementById("firstChart"));
        }

        this.$axios.post('/Linespeed/getAllLinespeed.do').then(res => {
          let data = []
          let series = []
          if(res.data.status === 200&&res.data.data){
            res.data.data.forEach(item => {
              data.push(item.hour)
              series.push(item.varvalue)
            })
            // 绘制图表
            this.LinespeedChart.setOption({
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              xAxis: {
                type: "category",
                data: data
              },
              yAxis: {
                type: "value",
                name:'m/min'
              },
              series: [{
                name:'生产线速度：',
                data: series,
                type: "line"
              }]
            });
          }


        })
      },
       //生产线速度
      Linespeed() {
        this.firstTime = setInterval(() => {
          this.LinespeedInit()
        }, 50000)

      },
      CurdayproductionInit(){
        if(!this.secondChart){
          this.secondChart = this.$echarts.init(
             document.getElementById("secondChart")
           );
        }
        this.$axios.post('Curdayproduction/getAllCurdayproduction.do').then(res => {
          if (res.data.status === 200&&res.data.data) {
            let data = []
            let series = []
            res.data.data.forEach(item => {
              data.push(item.hour)
              series.push(item.varvalue)
            })
            // 绘制图表
            this.secondChart.setOption({
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              xAxis: {
                type: "category",
                data: data
              },
              yAxis: {
                type: "value",
                name:'单位:m'
              },
              series: [{
                name:'当班产量',
                data: series,
                type: "line"
              }]
            });
          }
        })
      },
      //当班产量
      Curdayproduction(){

        this.threeth = setInterval(() => {
           this.CurdayproductionInit()

         },50000)
      }

      //
    }
  };
</script>

<style scoped="scoped">
  .report {
    position: relative;
  }

  .table {
    margin: 0 5%;
    width: 90%;
    text-align: center;
    border: 1px solid #eeeeee;
    font-size: 0.8rem;
    color: #333333;
    padding-bottom: 1rem;
  }

  .table td {
    padding: 0.3rem;
  }

  .chartItem {
    border-top: 0.5rem solid whitesmoke;
  }

  .van-tabs {
    padding-bottom: 1rem;
  }

  .title img {
    padding-top: 0.3rem;
    width: 1.6rem;
    height: 1.6rem;
  }

  .title p {
    line-height: 1rem;
    margin: 0;
    z-index: 99;
    font-size: 0.7rem;
  }

  .van-cell {
    padding-bottom: 0;
  }

  .workMan {
    width: 90%;
    height: 300px;
    margin: 8px auto;
  }

  .headman {
    border: 2px solid #3398db;
    width: 3.3rem;
    height: 1.8rem;
    line-height: 1.8rem;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    font-size: 18px;
  }

  .under {
    margin: 0 auto;
  }

  .underTop {
    border: 2px solid #3398db;
    background: #3398db;
    width: 90%;
    height: 6px;
    margin: 0 5%;
  }

  .verticalLines,
  .peoples {
    display: flex;
    justify-content: space-between;
  }

  .verticalLines {
    padding: 0 20px;
  }

  .bd,
  .under {
    border: 2px solid #3398db;
    height: 2.81rem;
    width: 1px;
    font-size: .8rem;
    background: #3398db;
  }
  .bd span{
    margin-left: .3rem;
    display: flex;
    color: seagreen;
    margin-top: .3rem;
  }

  .peo {
    border: 2px solid #3398db;
    min-width: 2rem;
    height: 1.56rem;
    line-height: 1.56rem;
    border-radius: 10px;
    font-size: .86rem;
    text-align: center;
  }
</style>
